<template>
  <table class="multi-row-table">
    <thead>
      <tr>
        <th style="width: 60px">序号</th>
        <th v-for="col in config.columns" :key="col.key" :label="col.title">
          {{ col.title }}
        </th>
        <th v-if="config.addRow" style="width: 60px">操作</th>
      </tr>
    </thead>
    <tbody v-if="tableData.length">
      <tr v-for="(obj, i) in tableData" :key="i">
        <td>{{ i + 1 }}</td>
        <td v-for="col in config.columns" :key="col.key">
          <div style="display: flex; align-items: center">
            <!-- 文字 -->
            <pre style="width: 100px; white-space: pre-wrap" v-if="col.type == 'string'">{{
              obj[col.key]
            }}</pre>
            <!-- 图像 -->
            <el-image
              v-if="col.type == 'image'"
              style="width: 50px; height: 50px"
              :src="obj[col.key]"
              fit="contain"
            />
            <template v-if="disabled || innerDisabled(col.key)">
              <div style="width: 200px" v-if="col.type === 'TextInput'">{{ obj[col.key] }}</div>
              <pre style="width: 100px; white-space: pre-wrap" v-if="col.type === 'TextAreaInput'">
              {{ obj[col.key] }}
              </pre>
              <div
                style="width: 100px"
                v-if="col.type === 'NumberInput' || col.type === 'DateSelect'"
              >
                {{ obj[col.key] }}
              </div>
            </template>
            <template v-else>
              <!-- 单行输入 -->
              <el-input
                v-if="col.type === 'TextInput'"
                style="width: 200px"
                v-model="obj[col.key]"
                :placeholder="'请输入' + col.title"
                @change="change"
              />
              <!-- 多行输入 -->
              <el-input
                v-if="col.type === 'TextAreaInput'"
                style="width: 200px"
                v-model="obj[col.key]"
                :placeholder="'请输入' + col.title"
                @change="change"
                type="textarea"
                :rows="3"
              />
              <!-- 数值输入 -->
              <el-input-number
                v-if="col.type === 'NumberInput'"
                style="width: 100px"
                v-model="obj[col.key]"
                :placeholder="'请输入' + col.title"
                @change="change"
                controls-position="right"
              />
              <!-- 日期选择 -->
              <el-date-picker
                v-if="col.type === 'DateSelect'"
                style="width: 130px"
                v-model="obj[col.key]"
                type="date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择"
                @change="change"
              />
              <div v-if="col.required" class="required">*</div>
            </template>
          </div>
        </td>
        <td v-if="config.addRow && !disabled">
          <el-button
            v-if="list.length > 1"
            type="danger"
            @click="delRow(i)"
            text
            circle
            style="cursor: pointer"
          >
            <i class="icon iconfont" style="cursor: pointer">&#xe718;</i>
          </el-button>
        </td>
      </tr>
      <!-- 合计栏 -->
      <tr v-if="config.total">
        <td>合计</td>
        <td v-for="col in config.columns" :key="col.key">
          {{ totalFn(col.type, col.key) }}
        </td>
        <td v-if="config.addRow && !disabled"></td>
      </tr>
      <!-- 多行表格 -->
      <tr v-if="config.addRow && !disabled">
        <td :colspan="config.columns.length + 2" style="border-width: 0 !important">
          <el-button type="primary" @click="addRow">新增一行</el-button>
        </td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr>
        <td :colspan="config.columns.length + 1">暂无数据</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import * as utils from '../utils'
const emits = defineEmits(['addRow', 'delRow', 'update'])
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  list: {
    type: Array as () => {
      [key: string]: any
    }[],
    default: () => {
      return []
    }
  },
  disabled: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
// table数据
const tableData = ref<
  {
    [key: string]: any
  }[]
>([])
const innerDisabled = (key: string) => {
  return false
}
// 新增行
const addRow = () => {
  if (props.list.length < props.config.maxRow) {
    emits('addRow')
  } else {
    ElMessage.error('已达到最大行数，不能继续添加')
  }
}
// 删除行
const delRow = (i: number) => {
  emits('delRow', i)
}
const change = () => {
  emits('update', tableData.value)
}
// 数值合计
const totalFn = (type: string, key: string) => {
  return utils.totalFn(props.list, type, key)
}
watch(props, () => {
  tableData.value = props.list
})
onMounted(() => {
  tableData.value = props.list
})
</script>

<style lang="scss" scoped>
$border-width: 1px;
$border-style: solid;
$border-color: #ccc;
$text-color: #333;
$theme-color: #ff5607;
.multi-row-table {
  width: 100%;
  border-spacing: 0;
  border: $border-style $border-color;
  border-width: 0;
  th,
  td {
    border: $border-style $border-color !important;
    border-width: 0 $border-width $border-width 0 !important;
    padding: 10px !important;
    text-align: left;
    color: $text-color;
  }
  tr:first-child {
    th:last-child {
      border-right-width: 0 !important;
    }
  }
  tr:last-child {
    td {
      border-bottom-width: 0 !important;
    }
  }
  tr {
    td:last-child {
      border-right-width: 0 !important;
    }
  }
  pre {
    font-family: inherit;
  }
  .required {
    line-height: 1;
    margin-left: 5px;
    color: red;
  }
}
</style>
